<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script type="text/javascript" src="../../assets/easyui/easyui1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="../../assets/easyui/easyui1.7.0/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../assets/easyui/easyui1.7.0/easyui.comm.valid.js"></script>
    <script type="text/javascript" src="../../assets/easyui/easyui1.7.0/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../assets/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../../js/easyui/Common.js"></script>
    <script type="text/javascript" src="../common.task.js"></script>
    <script type="text/javascript" src="tool.echart.js"></script>

    <link rel="stylesheet" type="text/css" href="../../assets/easyui/easyui1.7.0/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../assets/easyui/easyui1.7.0/themes/icon.css">
</head>
<body>

<div class="easyui-layout" data-options="fit:true">
    <div style="padding: 10px;">
        <form action="" id="searchForm" class="form-inline">
            <div class="input-group">
                <input name="startTime" id="query_startTime" data-options="prompt:'开始时间'" class="easyui-datetimebox"
                       style="width:160px">
                <input name="endTime" id="query_endTime" data-options="prompt:'结束时间'" class="easyui-datetimebox"
                       style="width:160px">
                <select id="query_timeType" name="timeType" class="easyui-combobox" style="width:150px;"
                        data-options="prompt:'时间类型'">
                </select>
                <button type="button" id="btnSearch" class="btn btn-sm btn-primary"> 搜索</button>
            </div>
        </form>
    </div>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%;height:500px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    function reportAvgMaxRunTime(jsonParam) {
        var url = '/task/taMethodCountReport/reportAvgMaxRunTime';
        $.ajax({
            type: 'post',
            data: jsonParam,
            headers: app.headers,
            dataType: 'json',
            url: url,
            success: function (data, textStatus, jqXHR) {
                echartBarShow(data, '平均最大执行时间的接口-' + jsonParam.timeType, 'methodCode', 'maxRunTime');
            },
            error(d, e) {
                $.messager.show({    // show error message
                    title: 'Error',
                    msg: d.responseJSON.errorMsg
                });
            }
        });
    }

    $(function () {
        //单位下拉框
        $("#query_timeType").combobox({
            editable: false,
            url: "/taskInfo/config?type=timeTypes&authKey=" + securityKey,//url
            valueField: "code", //相当于 option 中的 value 发送到后台的
            textField: "name"	//option中间的内容 显示给用户看的
        });
        $("#query_timeType").combobox('setValue', 'H')

        var beforeDay = 7;
        initStartEndTime(beforeDay);
        doSearch();
    });

    function doSearch() {
        var jsonParam = $('#searchForm').serializeJson();
        var timeType = jsonParam.timeType;
        if (!timeType) {
            timeType = 'H';
        }
        jsonParam.timeType = timeType;
        jsonParam.page = 1;
        jsonParam.pageSize = 100;
        reportAvgMaxRunTime(jsonParam);
    }

    $('#btnSearch').click(function () {
        doSearch();
    });
</script>
</body>
</html>